<template>
  <div>
    <a-list itemLayout="horizontal" :dataSource="list">
      <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
        <a-list-item-meta>
          <a slot="title">{{ item.title }}</a>
          <span slot="description">
            <span class="security-list-description">{{ item.description }}</span>
            <span v-if="item.value"> : </span>
            <span class="security-list-value" v-if="item.key == 'phone'">{{ item.value | filtersPhone}}</span>
            <span class="security-list-value" v-else>{{ item.value}}</span>
          </span>
        </a-list-item-meta>
        <template v-if="item.actions">
          <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
        </template>
      </a-list-item>
    </a-list>
    <awm-password
      ref="passwordModal"
      :visible="password.visible"
      :loading="password.confirmLoading"
      @cancel="
        () => {
          handleCancel('password')
        }
      "
      @ok="handleOk"
    />
    <awm-phone
      ref="phoneModal"
      :visible="phone.visible"
      :loading="phone.confirmLoading"
      :userInfo="userInfo"
      @cancel="
        () => {
          handleCancel('phone')
        }
      "
      @ok="handlePhoneOk"
    />
    <awm-wx
      ref="wxModal"
      :visible="wxStatus.visible"
      :loading="wxStatus.confirmLoading"
      :userInfo="userInfo"
      @cancel="() => {handleCancel('wxStatus')}"
      @ok="handlePhoneOk"
    />
  </div>
</template>

<script>
import AwmPassword from './modules/Password'
import AwmPhone from './modules/Phone'
import AwmWx from './modules/Wx'
import { userThirdAdd } from '@/api/login'
import { mapGetters } from 'vuex'
import { changeUrlQuery } from '@/utils/util'

export default {
  components: {
    AwmPassword,
    AwmPhone,
    AwmWx
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      phone: {
        visible: false,
        confirmLoading: false,
      },
      password: {
        visible: false,
        confirmLoading: false,
      },
      wxStatus: {
        visible: false,
        confirmLoading: false,
      },
    }
  },
  filters:{
    filtersPhone(val){
      let a = val+'' 
      return a.substring(0,3)+'****'+a.substr(val.length - 4)
    }
  },
  computed: {
    ...mapGetters({ userInfo: 'userInfo','wx':'wx' }),
    list:function(){
      let wx = this.wx
      let { userThirdList } = this.userInfo
      let dingding = userThirdList.find(v => v.platform == 2) 
      let qiye = userThirdList.find(v => v.platform == 3) 
      // let wx = userThirdList.find(v => v.platform == 1) 
      return [
        {
          key:"password",
          title: this.$t('account.settings.security.password'),
          description: '当前密码',
          value: '******',
          actions: {
            title: this.$t('account.settings.security.modify'),
            callback: () => {
              this.handleOpen('password')
            },
          },
        },
        {
          key:"phone",
          title: this.$t('account.settings.security.phone'),
          description: this.$t('account.settings.security.phone-description'),
          value: this.$store.getters.userInfo?this.$store.getters.userInfo.phone:'',
          actions: {
            title: this.$t('account.settings.security.modify'),
            callback: () => {
              this.handleOpen('phone')
            },
          },
        },
        {
          key:"wx",
          title: '微信绑定',
          description: '绑定状态',
          value: wx?'已绑定':'未绑定',
          actions: {
            title: wx?'解绑':'绑定',
            callback: 
            wx?
            () => {
              this.handleUnbind('wx')
            }:
            () => {
              this.handleBind('wx')
            }
          },
         
          // value: ?'已绑定':'未绑定',
          // actions: {
          //   title: wx?'解绑':'绑定',
          //   callback: 
          //   wx?
          //   () => {
          //     this.handleUnbind('wx')
          //   }:
          //   () => {
          //     this.handleBind('wx')
          //   }
          // },
        },
         {
          key:"dingding",
          title: '钉钉',
          description: '绑定状态',
          // value: dingding ? dingding.name:'未绑定',//
          value: dingding ? '已绑定' :'未绑定',//
        },
        {
          key:"qiye",
          title: '企业微信',
          description: '绑定状态',
          // value: qiye ? qiye.name:'未绑定',
          value: qiye ? '已绑定':'未绑定',
          
        }
        
      ]
    }
  },
  mounted(){
    let query = this.$route.query
    if(query.code){
      let code = query.code
      
      this.bindWx(code)
    }
  },
  methods: {
    handleOpen(str) {
      this[str].visible = true
    },
    handleCancel(str) {
      this[str].visible = false
      const form = this.$refs[`${str}Modal`].form
      form?form.resetFields():'' // 清理表单数据（可不做）
    },
    saveCB(str) {
      const form = this.$refs[`${str}Modal`].form
      this[str].visible = false
      this[str].confirmLoading = false
      // 重置表单数据
      form.resetFields()
      // 刷新表格
    },
    handleOk() {
      const createModal = this.$refs.passwordModal
      const form = createModal.form
      this.password.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          this.$store
            .dispatch('UserUpdateSelf', values)
            .then((res) => {
              this.saveCB('password')
              this.$message.success('密码修改成功!')
            })
            .catch((err) => {
              this.saveCB('password')
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    
    handlePhoneChange() {
      this.phone.mdl = null
      this.phone.visible = true
    },
    handlePhoneOk() {
      const createModal = this.$refs.phoneModal
      const form = createModal.form1
      this.phone.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          this.$store
            .dispatch('UserUpdatePhone', values)
            .then((res) => {
              this.saveCB('phone')
              this.list[1].value = this.userInfo.phone
              this.$message.success('新增成功!')
            })
            .catch((err) => {
              this.saveCB('phone')
            })
        } else {
          this.phone.confirmLoading = false
        }
      })
    },
    handlePhoneCancel() {},

    handleBind(){
      this.wxStatus.visible = true
    },
    bindWx(code){
      this.$store.dispatch('bindWx',{code}).then(res=>{
        this.$message.success('绑定成功!')
      })
      .catch(res=>{
        this.$message.error('绑定失败,请重试!')
      })
      .finally(()=>{
        changeUrlQuery(this, 0, 'code')
      })
    },
    handleUnbind(){
      let self = this
      const modal = self.$confirm({
        title: '解绑用户微信',
        content: `解绑用户微信`,
        okText: '确认',
        cancelText: '取消',
        onOk: () => this.$store.dispatch('unbindWx').then(res=>{}).catch(err=>modal.destroy()),
        onCancel: () => {},
      })
      
    }
  },
}
</script>

<style scoped>
</style>
